<template>
  <el-tabs v-model="activeTab">
    <template v-if="showSparepartServiceList">
    <!-- start 备件清单tab -->
    <el-tab-pane :label="$t('task.detail.components.sparePartList')" name="sparepart" v-if="showSpartpart">
      <div class="tips"><i class="iconfont icon-fdn-info"></i>{{$t('task.tip.editTip2')}}</div>
      <el-button type="primary" plain size="mini" @click="openChoosePartDialog">{{$t('common.base.addModule', {module: ''})}}</el-button>
      <part-service-table :data="sparepartData" :colums="sparepartColums" :type="activeTab" :part-config="partConfig" border :edit-unit-price="editUnitPrice" />
    </el-tab-pane>
    <!-- end 备件清单tab -->

    <!-- start 服务项目tab -->
    <el-tab-pane label="服务项目清单" name="service" v-if="showService">
      <div class="tips"><i class="iconfont icon-fdn-info"></i>{{$t('task.tip.editTip3')}}</div>
      <el-button type="primary" plain size="mini" @click="openChooseServiceDialog">{{$t('common.base.addModule', {module: ''})}}</el-button>
      <part-service-table :data="serviceData" :colums="serviceColums" :type="activeTab" border :edit-unit-price="editUnitPrice" />
    </el-tab-pane>
    <!-- end 服务项目tab -->

    <!-- start 物料申领tab -->
    <el-tab-pane :label="$t('task.detail.components.materialApply')" name="material" v-if="showMaterial">
      <div class="tips"><i class="iconfont icon-fdn-info"></i>{{$t('task.tip.editTip4')}}</div>

      <material-table :data="materialData" :columns="materialColums" :type="activeTab" border/>

      <el-button type="primary" icon="el-icon-plus" plain size="mini" @click="openChooseMaterialDialog">{{$t('common.form.preview.materialReturn.btn1')}}</el-button>
    </el-tab-pane>
    <!-- end 物料申领tab -->

    <!-- start 故障清单tab -->
    <el-tab-pane :label="$t('common.faultLibrary.faultList')" name="faultList" v-if="showFaultList">
      <!-- 新建工单故障权限有新建的权限，那么编辑删除也可以操作。后端说的 -->
      <fault-table 
        :data="faultData" 
        :task="task" 
        :addFaultAuth="addFaultAuth"
        :deleteFaultBtn="addFaultAuth"
        :editFaultBtn="addFaultAuth"
        @dataChange="addChooseFault"
      />
    </el-tab-pane>
    <!-- end 故障清单tab -->
    </template>

    <!-- start 附加组件展示 -->
    <el-tab-pane v-for="item in customCardList" :key="item.cardId" :label="item.cardName" :name="item.cardId">
      <task-detail-card 
        ref="taskDetailCard"
        :right-active-tab="'add-on-' + activeTab" 
        :task-cards="[item]"
        :share-data="propsForSubComponents" 
        :from-view="'created'"
        :card-forms="cardForms"
        @dataUpdate="data => $set(this, 'cardForms', data)"
      />
    </el-tab-pane>
    <!-- end 附加组件展示 -->

    

    <!-- start 选择备件弹窗 -->
    <choose-part-dialog ref="choosePartDialog" :value.sync="sparepartData" :colums="sparepartColums" :part-config="partConfig" :card="{ cardId: sparepart.id }" @submit="addChoosePart" />
    <!-- end 选择备件弹窗 -->

    <!-- start 选择服务项目弹窗 -->
    <choose-service-dialog ref="chooseServiceDialog" :value.sync="serviceData" :colums="serviceColums" @submit="addChooseService" />
    <!-- end 选择服务项目弹窗 -->

    <!-- start 选择物料申领弹窗 -->
    <choose-material-dialog ref="chooseMaterialDialog" :value.sync="materialData" :columns="materialColums" @submit="addChooseMaterial" :productTemplate="productTemplate"/>
    <!-- end 选择物料申领弹窗 -->

  </el-tabs>
</template>

<script>
import PartSeviceList from './PartSeviceList';
export default PartSeviceList
</script>

<style lang="scss" scoped>
  @import './PartSeviceList';
</style>
